<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11.1.1-相同的前置元素和后置元素</title>
</head>

<body>
    <div id="app">
        
    </div>
</body>
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>

        /**
         * 快速 Diff 算法包含预处理步骤，这其实是借鉴了纯文本 Diff 算法的思路
         * 
         * 
         * 在纯文本 Diff 算法中，存在对两段文本进行预处理的过程
         * 
         * - 两段文本全等，那么就无须进入核心Diff 算法的步骤了
         * 
         * - 预处理过程还会处理两段文本相同的前缀和后缀
         *    内容相同的问题，是不需要进行核心 Diff 操作的
         *    TEXT1: I use vue for app development
         *    TEXT2: I use react for app development
         *    下面真正需要进行 Diff 操作的部分 => 
         *    TEXT1: vue
         *    TEXT2: react
         * 
         * - 特定情况下我们能够轻松地判断文本的插入和删除
         * 
         *    TEXT1: I like you
         *    TEXT2: I like you too
         *    去掉这两段文本中相同的前缀内容和后缀内容之后
         *    TEXT1:
         *    TEXT2: too
         *    TEXT1 的内容为空。这说明TEXT2 在 TEXT1 的基础上增加了字符串 too
         * 
         *    相反
         *    TEXT1: I like you too
         *    TEXT2: I like you
         *    去掉这两段文本中相同的前缀内容和后缀内容之后
         *    TEXT1: too
         *    TEXT2:
         *    TEXT2 是在 TEXT1 的基础上删除了字符串 too
         * 
         * */ 
 
        
        

    </script>
    

</html>